<template>
  <div >
    <p class="title" style="padding-left: 10px">公式计算器：</p>
    <!-- 公式计算器 -->
    <div class="area">
      <div class="box">
        <div style="margin: 10px 20px">
          <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-position="top"
              label-width="80px"
          >
            <!-- 换算选择 -->
            <el-form-item :label="data.GSMS.GSMC + '：'" prop="bm">
              <el-select v-model="form.bm" placeholder="请选择换算单位" @change="changeFn(form.bm)" style="width: 300px">
                <el-option v-for="item in form.parentList" :label="item.MC" :value="item.BM" ></el-option>
              </el-select>
            </el-form-item>
            <!-- 公式数值 -->
            <el-form-item :label="form.title + '：'" prop="val">
              <el-input v-model="form.val" style="width: 300px"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                  type="primary"
                  @click="calculateFn"
                  style="font-size: 20px"
              >计算
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 计算结果 -->
      <div style="margin-left: 20px">
        <span style="font-size: 20px">计算结果：</span>
        <span style="font-size: 20px; color: red">{{ result }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { FormulaCalculationAPI } from '@/api/index.js'
export default {
  name: "CalculateArea",
  props: {
    data: {
      // 公式详情
      type: Object,
      default: () => {},
    },
    formula: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      form: {
        bm: '', // 默认选中编码
        title: null, // 输入框标题
        val: null, // 输入框内容
        parentList: [] // 数据列表
      },
      checkedObj: {}, // 当前选中的数据
      defaultData: {}, // 默认数据
      result: "", // 计算结果
      rules: {
        bm: [{ required: true, message: '请选择内容', trigger: 'change' }],
        val: [
          {required: true, message: "内容不能为空!", trigger: "blur"},
          {
            pattern: /^(\+)?\d+(\.\d+)?$/,
            message: "输入内容为正数或小数！",
            trigger: "blur",
          },
        ]
      },
    };
  },
  created() {
    let arr = this.data.GS2.filter(item => item.fbm == '1' || item.BM == '1')
    this.checkedObj = {
      CSID: '0',
      JSGS: arr[0].jsgs,
      CSBS: arr[1].BM,
      CSMC: arr[1].MC,
    }
     console.log(arr);
    this.disposeData(this.data.GS2)
  },
  methods: {
    // 数据处理
    disposeData(list) {
      // 取出父数据
      this.form.parentList = list.filter((item,index) => item.fbm === '')
      // 默认选中值
      this.form.bm = this.form.parentList[0].BM
      let arr = this.data.GS2.filter(item => item.fbm === this.form.bm)
      this.form.title = arr[0].MC
    },
    // 选中值发生变化时触发
    changeFn(bm) {
      // 取出选中值的名称
      let checkedVal = this.data.GS2.filter(item => item.fbm === bm)
      this.form.title = checkedVal[0].MC
      // 取出选中值数据
      let checkedArr = this.data.GS2.filter(item => item.BM == bm)
      this.checkedObj = {
        CSID: '0',
        JSGS: checkedArr[0].jsgs,
        CSBS: checkedVal[0].BM,
        CSMC: checkedVal[0].MC,
      }

    },
    // 计算结果
    calculateFn() {
      // 兜底校验
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.FormulaCalculation().then(() => {
            // this.$refs.form.resetFields();
          });
        }
      });
    },
    // 医学公式计算
    async FormulaCalculation() {
      // 准备参数
      console.log(this.checkedObj);
      this.checkedObj .Value = this.form.val
      try {
        // 发起请求
        const res = await FormulaCalculationAPI(
            {token: "2855ed6102590a02fd52ce00567ee9d4", gsbm: this.data.GSMS.GSBM},
            {
              gs: {
                GSBM: this.data.GSMS.GSBM,
                GSMC: this.data.GSMS.GSMC,
                JSGS: this.checkedObj.JSGS,
              },
              listGSCS: [this.checkedObj],
            }
        );
        // 获取计算结果
        this.result = res.data.result;
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style scoped>
.area {
  background-color: #f3f3f3;
  padding: 15px 10px 30px 10px;
  margin: 0 0 25px 10px;
}

.title {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
}

/deep/ .el-form-item__label {
  font-size: 18px;
}
</style>
